<template>
  动态添加路由<br>
  <el-button type="" @click="add1">在第二个菜单后，添加新菜单（根）</el-button><br>
  <el-button type="" @click="add2">在【测试】里添加新菜单，（第一个菜单后）</el-button><br>
  <el-button type="" @click="add4">在【测试-新菜单】里添加新新菜单</el-button><br>
  <el-button type="" @click="add3">在【测试-原生HTML】里添加子菜单</el-button><br>
  <br>
  <el-button type="" @click="del3">删除 —— 【测试-原生HTML-第二级子菜单】</el-button><br>
  <el-button type="" @click="del2">删除 ——【复合控件-表单控件】</el-button><br>
  <el-button type="" @click="del1">删除 ——【基础控件】</el-button><br>

</template>

<script setup>
  import { useRouter } from '/nf-ui-core'
  import { Document, FolderOpened } from '@element-plus/icons'

  const router = useRouter()

  const add1 = () => {
    router.addRoute([
      {
        menuId: 'dt-100',
        title: '添加根菜单',
        naviId: '0',
        path: 'new-router',
        icon: FolderOpened,
        childrens: [
          {
            menuId: '100-10', title: '动态菜单', path: 'ui', icon: Document,
            component: () => import('../base/02-eltext.vue')
          }
        ]
      }
    ], { index: 2 })
  }

  const add2 = () => {
    router.addRoute([
      {
        menuId: 'dt-200',
        title: '【测试】的子菜单',
        naviId: '0',
        path: 'new-router',
        icon: FolderOpened,
        childrens: [
          {
            menuId: '200-10', title: '动态菜单', path: 'ui', icon: Document,
            component: () => import('../base/02-eltext.vue')
          }
        ]
      }
    ], {path: ['13'], index: 1})
  }

  const add3 = () => {
    router.addRoute([
      {
        menuId: 'dt-300',
        title: '第二级子菜单',
        naviId: '0',
        path: 'new-router',
        icon: FolderOpened,
        childrens: [
          {
            menuId: '300-10', title: '动态菜单', path: 'ui', icon: Document,
            component: () => import('../base/02-eltext.vue')
          }
        ]
      }
    ], {path: ['13', '1311']})
  }
  
  const add4 = () => {
    router.addRoute([
      {
        menuId: 'dt-400',
        title: '子菜单变',
        naviId: '0',
        path: 'new-router',
        icon: FolderOpened,
        childrens: [
          {
            menuId: '400-10', title: '动态菜单', path: 'ui', icon: Document,
            component: () => import('../base/02-eltext.vue')
          }
        ]
      }
    ], {path: ['13', 'dt-200', '200-10']})
  }

  const del1 = () => {
    router.removeRoute([], '10')
  }

  const del2 = () => {
    router.removeRoute(['12'], '1221')
  }

  
  const del3 = () => {
    router.removeRoute(['13', '1311'], 'dt-300')
  }

</script>